<template>
  <el-card class="box-card">
    <div slot="header" class="box-header">
      <span>英雄资料</span>
      <el-switch
        style="display: block"
        v-model="viewValue"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value="0"
        inactive-value="1"
        active-text="多宫格视图"
      >
      </el-switch>
    </div>
    <div>
      <el-table
        v-if="viewValue === '1'"
        ref="filterTable"
        :data="filterTableData"
      >
        <el-table-column prop="ename" label="英雄" sortable width="100">
          <template slot-scope="scope">
            <el-avatar
              :size="40"
              shape="square"
              :src="
                'https://game.gtimg.cn/images/yxzj/img201606/heroimg/' +
                scope.row.ename +
                '/' +
                scope.row.ename +
                '.jpg  '
              "
            >
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="ename"
          label="英雄编号"
          sortable
          width="100"
        ></el-table-column>
        <el-table-column prop="cname" label="英雄名称" width="100">
        </el-table-column>
        <el-table-column prop="title" label="英雄称号" width="100">
        </el-table-column>
        <el-table-column label="英雄类型" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.hero_type == 1" type="info">战士</el-tag>
            <el-tag v-if="scope.row.hero_type == 2">法师</el-tag>
            <el-tag v-if="scope.row.hero_type == 3" type="warning">坦克</el-tag>
            <el-tag v-if="scope.row.hero_type == 4" type="danger">刺客</el-tag>
            <el-tag v-if="scope.row.hero_type == 5" type="success">射手</el-tag>
            <el-tag v-if="scope.row.hero_type == 6" type="info">辅助</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="skin_name"
          label="皮肤名称"
          width="300"
        ></el-table-column>

        <el-table-column>
          <template #header>
            <el-input
              v-model="searchValue"
              size="mini"
              placeholder="输入英雄名称关键字模糊搜索"
            />
          </template>
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!--多宫格视图-->
      <el-row v-if="viewValue === '0'">
        <el-col :span="12" class="box-col-left">
          <div v-for="(item, index) in filterTableData" :key="item.ename">
            <el-image
              style="
                width: 100px;
                height: 100px;
                margin: 20px;
                border-radius: 10px 0px 10px 0px;
                cursor: pointer;
                box-shadow: 0 0 10px blue;
              "
              :src="
                'https://game.gtimg.cn/images/yxzj/img201606/heroimg/' +
                item.ename +
                '/' +
                item.ename +
                '.jpg  '
              "
              @click="changeImage(index)"
            ></el-image>
            <h4>{{ item.cname }}</h4>
          </div>
        </el-col>
        <el-col :span="12" class="box-col-right">
          <el-image
            style="
              width: 100%;
              min-width: 600px;
              height: 370px;
              border-radius: 5px 5px 5px 5px;
            "
            :src="
              'https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/' +
              filterTableData[imageIndex].ename +
              '/' +
              filterTableData[imageIndex].ename +
              '-bigskin-'+skinIndex+'.jpg'
            "
          ></el-image>
          <h4>{{ filterTableData[imageIndex].cname }}</h4>
          <p>{{ filterTableData[imageIndex].title }}</p>
          <div>
            <el-image
              v-for="(item, index) in splitSkinName"
              :key="index"
              style="
                border-radius: 5px 5px 5px 5px;
                margin: 10px;
                width: 60px;
                height: 60px;
                border-radius: 10px 0px 10px 0px;
                cursor: pointer;
                box-shadow: 0 0 10px rebeccapurple;
              "
              :title="item"
              :src="
                'https://game.gtimg.cn/images/yxzj/img201606/heroimg/' +
                filterTableData[imageIndex].ename +
                '/' +
                filterTableData[imageIndex].ename +
                '-smallskin-' +
                (index + 1) +
                '.jpg'
              "
                @click="changeSkinImage(index+1)"


            ></el-image>
          </div>
        </el-col>
      </el-row>

      <!--分页部分 -->

      <el-row type="flex" justify="space-between">
        <el-col class="el-col-left" :span="12">
          <el-select v-model="selectValue" placeholder="请选择英雄类型">
            <el-option label="全部英雄" value=""></el-option>

            <el-option
              v-for="item in typesData"
              :key="item.hero_type_id"
              :label="item.hero_type_name"
              :value="item.hero_type_id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col class="el-col-right" type="flex" justify="space-between">
          <el-pagination
            layout="prev, pager, next"
            :total="tableData.length"
            :page-size="pageSize"
            @current-change="currentChange"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      tableData: [], //表格所有数据
      searchValue: "", //搜索关键字
      selectValue: "", //下拉关键字
      pageSize: 6, //每页多少条
      pageNum: 1, //当前页
      typesData: [], //英雄类型数据
      viewValue: "1", //视图切换值
      imageIndex: 0, //默认值索引
      skinIndex:1   //皮肤索引
    };
  },
  created() {
    this.query(); //查询英雄
    this.queryTypes(); //查询英雄类型
  },
  methods: {
    query() {
      fetch("http://47.241.102.141:3000/heros")
        .then((response) => response.json())
        .then((data) => {
          this.tableData = data; //数组中存储完整数据 通过filter实现
        });
    },
    queryTypes() {
      fetch("http://47.241.102.141:3000/heroTypes")
        .then((response) => response.json())
        .then((data) => {
          this.typesData = data;
        });
    },
    currentChange(val) {
      this.pageNum = val;
    },
    changeImage(index) {
      this.imageIndex = index;
      this.skinIndex=1;
    },
    changeSkinImage(index){
       this.skinIndex=index;
    },

    handleDelete(index, row) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].ename == row.ename) {
          this.tableData.splice(i, 1);
        }
      }
    },
  },
  computed: {
    //u过滤数据实现分页和搜索效果  这个做法有点难理解  建议使用两个数组 倒换数据
    filterTableData() {
      //先搜索
      let newTable = this.tableData.filter((item) => {
        return (
          !this.searchValue || item.cname.includes(this.searchValue.trim())
        );
      });

      //在分类
      let newTable2 = newTable.filter((item) => {
        return !this.selectValue || item.hero_type == this.selectValue;
      });

      //在分页  搜索的数据必须在第一页
      if (newTable2.length <= this.pageSize) {
        return newTable2;
      } else {
        let finalTable = newTable2.filter((item, index) => {
          let start = (this.pageNum - 1) * this.pageSize;
          let end = start + this.pageSize;
          return index >= start && index < end;
        });
        return finalTable;
      }
    },
    splitSkinName() {
      return this.filterTableData[this.imageIndex].skin_name.split("|");
    },
  },
};
</script>
<style>
.box-card {
  width: 90%;
}

.box-header {
  display: flex;
  justify-content: space-between;
}

.el-row {
  padding-top: 20px;
}

.el-col-left {
  text-align: left;
}
.el-col-right {
  text-align: right;
}
</style>